
<div class="panel panel-default">
 <div class="panel-heading"><label th:text='${apiInfo.description}'></label>&nbsp;:&nbsp;<label th:text='${apiInfo.url}'></label></div>
 <div class="panel-body">

	<ul id="myTab" class="nav nav-tabs">
		<li class="active">
			<a href="#info" data-toggle="tab">
				 描述
			</a>
		</li>
		<li><a href="#debug" data-toggle="tab">测试</a></li>
		
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade in active" id="info">
			<div class="panel panel-default">
				<table class='table table-bordered'>
					<tr>
						<td width="10%" align="left">
							<label>描述</label>
						</td>
						<td width="20%" th:text="${apiInfo.description}"></td>
						<td width="10%">method</td>
						<td width="60%"th:text="${apiInfo.fullName}"></td>
					</tr>
					<tr>
						<td width="10%">requestMethod</td>
						<td width="20%" th:text="${apiInfo.requestMethod}"></td>
						<td width="10%">response</td>
						<td width="60%"th:text="${apiInfo.contentType}"></td>
					</tr>
				</table>
			</div>
			
			<div class="panel panel-default">
			  <div class="panel-heading">参数列表</div>
			  <div class="panel-body">
			    <table class='table table-bordered'>
			    	<tr>
			    		<th colspan="3" width="20%">名称</th>
			    		<th width="30%">类型</th>
			    		<th width="50%">说明</th>
			    	</tr>
			    	<span  th:each="para:${apiInfo.params}">
			    	<tr>
			    		<td th:text="${para.name}" colspan="3"></td>
			    		<td th:text="${para.dataType}"></td>
			    		<td th:text="${para.description}"></td>
			    	</tr>
				    	<span  th:each="subParam:${para.children}">
				    	<tr>
				    		<td>&nbsp;</td>
				    		<td th:text="${subParam.name}" colspan="2"></td>
				    		<td th:text="${subParam.dataType}"></td>
				    		<td th:text="${subParam.description}"></td>
				    	</tr>
				    	<tr th:each="subsub:${subParam.children}">
				    		<td>&nbsp;</td>
				    		<td>&nbsp;</td>
				    		<td th:text="${subsub.name}"></td>
				    		<td th:text="${subsub.dataType}"></td>
				    		<td th:text="${subsub.description}"></td>
				    	</tr>
				    	</span>
			    	</span>
			    </table>
			  </div>
			</div>
			
			<div class="panel panel-default">
			  <div class="panel-heading">返回值</div>
			  <div class="panel-body">
			   <table class='table table-bordered'>
			    	<tr>
			    		<th colspan="4" width="20%">名称</th>
			    		<th width="30%">类型</th>
			    		<th width="50%">说明</th>
			    	</tr>
			    	<span  th:each="ret:${apiInfo.returnValue}">
			    	<tr>
			    		<td th:text="${ret.name}" colspan="4"></td>
			    		<td th:text="${ret.dataType}"></td>
			    		<td th:text="${ret.description}"></td>
			    	</tr>
				    	<span th:each="sub:${ret.children}">
				    	<tr>
				    		<td>&nbsp;</td>
				    		<td th:text="${sub.name}" colspan="3"></td>
				    		<td th:text="${sub.dataType}"></td>
				    		<td th:text="${sub.description}"></td>
				    	</tr>
				    		<span th:each="subsub:${sub.children}">
						    	<tr>
						    		<td>&nbsp;</td>
						    		<td>&nbsp;</td>
						    		<td th:text="${subsub.name}" colspan="2"></td>
						    		<td th:text="${subsub.dataType}"></td>
						    		<td th:text="${subsub.description}"></td>
						    	</tr>
						    	<tr th:each="grand:${subsub.children}">
						    		<td>&nbsp;</td>
						    		<td>&nbsp;</td>
						    		<td>&nbsp;</td>
						    		<td th:text="${grand.name}" colspan="1"></td>
						    		<td th:text="${grand.dataType}"></td>
						    		<td th:text="${grand.description}"></td>
						    	</tr>
				    		</span>
				    	</span>
			    	</span>
			    </table>
			  </div>
			</div>
		</div>
		
		
		
		<div class="tab-pane fade" id="debug">
			<div class="panel panel-default">
			  <div class="panel-heading">请求</div>
			  <!--requestBody=true用textArea,false用from-->
			  <div class="panel-body">
			  <form id="fm" >
			    <table class='table table-bordered' th:if="${!apiInfo.requestBody}" >
			    	<tr th:each="para:${apiInfo.debugParams}">
			    		<td width="10%" th:text="${para.name}" >
			    		</td>
			    		<td width="50%"><input type="text" th:name="${para.name}" class="form-control"></td>
			    		<td width="40%" >
			    			<label class="control-label" th:text="${para.description}"></label>
			    		</td>
			    	</tr>
			    </table>
			    <table class='table table-bordered' th:if="${apiInfo.requestBody}">
			    	<tr>
			    		<td>
			    			<textarea  id="requestContent" style="width:100%;height:300px" th:text="${apiInfo.jsonParam}"></textArea>
			    		</td>
			    	</tr>
			    </table>
			  
			    <button type="button" class="btn btn-primary" onclick=subForm()>提交</button>
			  </div>
			  </form>
			</div>
			
			<div class="panel panel-default">
			  <div class="panel-heading">返回</div>
			  <div class="panel-body">
			   	<pre id="result">
				</pre>
			  </div>
			</div>
		</div>
	</div>

</div>
</div>

<script type="text/javascript">
function subForm(){
	var url='[[${apiInfo.url}]]';
	var requestBody='[[${apiInfo.requestBody}]]';
	var contentType='[[${apiInfo.contentType}]]';
	$('#result').html('');
	
	if(requestBody=="true"){
		data=$("#requestContent").val();
		ajaxUtil.json(url,data,function(resp){
			$('#result').html(common.jsonToStr(resp))
		},"JSON");
		return;
	}
	
	
	if(contentType.indexOf('json')!=-1){
		common.postForm('fm',url,function(resp){
			$('#result').html(common.jsonToStr(resp))
		});
	}else{
		var data=$("#"+'fm').serialize();
		url=url+'?'+data;
		common.getHtml(url,function(resp){
			$('#result').text(resp)
		});
	}
}
</script>



